<!DOCTYPE html>
<html>
<head>
    <title>Physics Pulley System</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Define Coordinates and Dimensions ---
    const tableEdgeX = 180;
    const tableY = 250;
    
    const pulleyCenter = { x: tableEdgeX, y: 100 };
    const pulleyRadius = 25;
    
    const blockASize = { w: 40, h: 30 };
    // Block A hangs vertically from the left side of the pulley
    const ropeStartA = { x: pulleyCenter.x - pulleyRadius, y: pulleyCenter.y };
    const blockAPos = { 
        x: ropeStartA.x - blockASize.w / 2, 
        y: 180 
    };
    const ropeAttachA = { x: ropeStartA.x, y: blockAPos.y };

    // Block B is on the table, its rope makes a 30-degree angle with the horizontal
    // The rope connects to the top-left corner of block B
    const blockBSize = { w: 60, h: 20 };
    const blockBTopY = tableY - blockBSize.h;
    // Calculate position of B based on the 30-degree angle
    const angleRad = 30 * Math.PI / 180;
    const heightDiff = blockBTopY - pulleyCenter.y; // 130
    const horizontalDiff = heightDiff / Math.tan(angleRad); // 130 / tan(30)
    
    const ropeAttachB = { 
        x: pulleyCenter.x + horizontalDiff, 
        y: blockBTopY 
    };
    const blockBPos = { x: ropeAttachB.x, y: ropeAttachB.y };

    // --- Drawing Functions ---

    // 1. Draw Table
    function drawTable() {
        ctx.beginPath();
        ctx.moveTo(tableEdgeX, tableY);
        ctx.lineTo(canvas.width, tableY); // Horizontal surface
        ctx.moveTo(tableEdgeX, tableY);
        ctx.lineTo(tableEdgeX, canvas.height); // Vertical edge
        ctx.stroke();
        
        ctx.font = "24px KaiTi";
        ctx.fillText("水平桌面", tableEdgeX + 70, tableY + 30);
    }

    // 2. Draw Pulley and Support
    function drawPulley() {
        // Support structure
        ctx.beginPath();
        ctx.moveTo(pulleyCenter.x - 50, 50);
        ctx.lineTo(pulleyCenter.x + 50, 50);
        ctx.stroke();
        
        // Hatching lines for the fixed support
        const hatchLength = 10;
        for (let i = 0; i <= 10; i++) {
            ctx.beginPath();
            ctx.moveTo(pulleyCenter.x - 50 + i * hatchLength, 50);
            ctx.lineTo(pulleyCenter.x - 50 + i * hatchLength - hatchLength, 50 + hatchLength);
            ctx.stroke();
        }
        
        // Rod connecting support to pulley
        ctx.beginPath();
        ctx.moveTo(pulleyCenter.x, 50);
        ctx.lineTo(pulleyCenter.x, pulleyCenter.y);
        ctx.stroke();
        
        // Pulley wheel
        ctx.beginPath();
        ctx.arc(pulleyCenter.x, pulleyCenter.y, pulleyRadius, 0, 2 * Math.PI);
        ctx.stroke();
    }

    // 3. Draw Blocks and Ropes
    function drawBlocksAndRopes() {
        // Block A and its rope
        ctx.beginPath();
        ctx.moveTo(ropeStartA.x, ropeStartA.y);
        ctx.lineTo(ropeAttachA.x, ropeAttachA.y);
        ctx.stroke();
        ctx.strokeRect(blockAPos.x, blockAPos.y, blockASize.w, blockASize.h);
        
        // Block B and its rope
        ctx.beginPath();
        // Rope from pulley center (approximation) to block corner
        ctx.moveTo(pulleyCenter.x, pulleyCenter.y);
        ctx.lineTo(ropeAttachB.x, ropeAttachB.y);
        ctx.stroke();
        ctx.strokeRect(blockBPos.x, blockBPos.y, blockBSize.w, blockBSize.h);
    }

    // 4. Draw Labels and Angle
    function drawLabelsAndAngle() {
        // A and B labels
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.fillText("A", blockAPos.x - 30, blockAPos.y + blockASize.h / 2 + 8);
        ctx.fillText("B", blockBPos.x + 10, blockBPos.y - 10);
        
        // Angle arc
        ctx.beginPath();
        ctx.arc(ropeAttachB.x, ropeAttachB.y, 35, Math.PI - angleRad, Math.PI, false);
        ctx.stroke();
        
        // Angle value
        ctx.font = "20px 'Times New Roman'";
        ctx.fillText("30°", ropeAttachB.x - 55, ropeAttachB.y - 10);

        // Small marker for the angle vertex
        ctx.beginPath();
        ctx.moveTo(ropeAttachB.x, ropeAttachB.y);
        ctx.lineTo(ropeAttachB.x, ropeAttachB.y - 10);
        ctx.stroke();
    }

    // --- Execute Drawing ---
    drawTable();
    drawPulley();
    drawBlocksAndRopes();
    drawLabelsAndAngle();

</script>
</body>
</html>